<template>
  <div class="demo-pagination-block">
    <el-pagination
      v-model:currentPage="pageData.currentPage"
      v-model:page-size="pageData.pageSize"
      :disabled="page.disabled"
      :page-sizes="page.pageSizeSelect"
      :small="page.small"
      :background="page.background"
      :layout="page.layout"
      :total="total"
      :hide-on-single-page="true"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>
<script lang="ts" setup name="EL-Pagination">
import { reactive } from 'vue'
import { pageType } from '@/interfaces/PaginationType'
// defineProps不支持使用外部导入的类型直接使用，会报错：
export interface PaginationType {
  total: number // 总条数
  page?: pageType
}
// 默认值
const props = withDefaults(defineProps<PaginationType>(), {
  total: 500,
  page: () => {
    return {
      disabled: false,
      background: true,
      small: false,
      pageSizeSelect: [50, 100, 200, 300, 400, 500],
      layout: 'total, sizes, prev, pager, next,jumper',
    }
  },
})
// 传入的方法
const emits = defineEmits(['pageChange'])
const pageData = reactive({
  currentPage: 1,
  pageSize: 100,
})
const handleSizeChange = (val: number): void => {
  const willMakePageChange = props.total / val + 1 < pageData.currentPage
  pageData.pageSize = val
  if (!willMakePageChange) {
    emits('pageChange', pageData)
  }
}
const handleCurrentChange = (val: number): void => {
  pageData.currentPage = val
  emits('pageChange', pageData)
}
// 暴露的属性和方法
defineExpose({})
</script>
<style lang="scss"></style>
